<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<!--
	<link rel="stylesheet" href="../../../../beacon-web-fe/resource/css/cardpack/m_reseet.css">
	<link rel="stylesheet" href="../../../../beacon-web-fe/resource/css/cardpack/m_list.css">
	-->
	<link rel="stylesheet" href="css/cardpack.css">
	<title>360</title>
</head>

<body class="login">
	<header>
		<div class="relative">
			<h3>手机登录</h3>
		</div>
	</header>

	<dl class="content">
		<dt class="phoneText">
			<i class="icon-phone"></i>
			<input id="btn_phone" type="text" placeholder="请输入手机号" maxlength="11" />
			<span id="sh_delete" class="icon-delete hide"></span>
		</dt>
		<dd id="btn_submit" class="submit">
			下一步
		</dd>
	</dl>

	<div class="errorTip hide">
		无效手机号码
	</div>

	<footer class="footer">
		其它登录方式
	</footer>


	<!--============================================================================-->

	<!--for gate-->
	<div id="validate" class="hide">
		<header>
			<div class="relative">
				<h3>验证码</h3>
			</div>
		</header>

		<dl class="content">
			<dt class="tip">
				我们已发送短信验证码到您的手机
			</dt>
			<dt class="phoneNumber">
				......
			</dt>
			<dt class="phoneText">
				<i class="icon-key"></i>
				<input id="btn_validate" type="text" placeholder="请输入6位验证码" maxlength="6" />
				<span id="sh_delete_v" class="icon-delete hide" style="right:140px;"></span>
				<div id="btn_send" class="button-validate"><b>120</b>秒后重发</div>
			</dt>
			<dd id="btn_login" class="submit">
				登录
			</dd>
		</dl>

		<div class="errorTip hide">
			无效手机号码
		</div>

		<footer class="footer">
			
		</footer>	
	</div>
	<!--end gate-->

	<div id="userNamePassword" class="hide">
		<header>
			<div class="relative">
				<h3>登录</h3>
			</div>
		</header>

		<dl class="content">
			<dt class="phoneText">
				<i class="icon-user"></i>
				<input id="btn_user" type="text" placeholder="手机号/360账号" maxlength="20" />
				<span id="sh_delete_user" class="icon-delete hide"></span>
			</dt>
			<dt class="phoneText">
				<i class="icon-pwd"></i>
				<input id="btn_pwd" type="password" placeholder="6-16位数字或字母" maxlength="16" />
				<span id="sh_delete_pwd" class="icon-delete hide"></span>
			</dt>
			<dd id="btn_loginForpwd" class="submit">
				登录
			</dd>
		</dl>

		<div class="errorTip hide">
			无效手机号码
		</div>

		<footer class="footer">
			其它登录方式
		</footer>
		<div class="text-getpwd">
			找回账号
		</div>
	</div>
	<!--end gate-->

</body>

</html>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/wGate.js"></script>
<script type="text/javascript">

var app = {
	baseUrl : "/" , 
	init : function(){
		this.gate = new wGate();
		this.gate.append({
			name:"validate",
			content : $("#validate")[0],
			direction : "toLeft",
			backgroundColor: "#EEEEEE"
		});

		this.gate.append({
			name:"userNamePassword",
			content : $("#userNamePassword")[0],
			direction : "toLeft",
			backgroundColor: "#EEEEEE"
		});

		this.bindEvent();
	} , 
	bindEvent : function(){
		$(".footer").on("click",function(){
			if(app.gate.getName().name != "userNamePassword")
			{
				app.gate.show("userNamePassword");
			}
			else
			{
				app.gate.hide("userNamePassword");
			}
		});
		this.phoneOptionEvent(); /*初始化手机第一个页面事件*/
		this.userpwdEvent();
	} , /*end bindEvent*/

	phoneOptionEvent : function(){
		$("#btn_phone")[0].onkeypress = function(e){
			var evt = e || window.event;
			if(e.keyCode>=48 && e.keyCode<=57)
			{
				if(e.target.value.length>0)
				{
					$("#sh_delete").removeClass("hide");
				}
				return true;
			}
			else
			{
				return false;
			}
		};

		$("#btn_phone")[0].onkeyup = function(e){
			var evt = e || window.event;
			var $phone,$submit;
			$(".errorTip").addClass("hide");
			if(e.target.value.length==11)
			{
				$phone = $(".icon-phone");
				$submit = $(".submit");
				if($phone[0]==undefined)
				{
					return;
				}
				$phone.removeClass("icon-phone");
				$phone.addClass("icon-phoneH");
				$submit.removeClass("submit");
				$submit.addClass("submitH");
			}
			else if(e.target.value.length==0)
			{
				$("#sh_delete").addClass("hide");
			}
			else
			{
				$phone = $(".icon-phoneH");
				$submit = $(".submitH");
				if($phone[0]==undefined)
				{
					return;
				}
				$phone.removeClass("icon-phoneH");
				$phone.addClass("icon-phone");
				$submit.removeClass("submitH");
				$submit.addClass("submit");
			}
		};

		$("#sh_delete").on("click",function(){
			$("#btn_phone").val("");
			$(this).addClass("hide");

			$phone = $(".icon-phoneH");
			$submit = $(".submitH");			
			$phone.removeClass("icon-phoneH");
			$phone.addClass("icon-phone");
			$submit.removeClass("submitH");
			$submit.addClass("submit");
			$(".errorTip").addClass("hide");
		});

		/*Event : 手机注册下一步*/
		$("#btn_submit").on("click",function(){
			var $value = $("#btn_phone").val();

			if($(this)[0].className=="submit")
			{
				return;
			}
			if($value[0].substr(0,1)!="1")
			{
				$(".errorTip").removeClass("hide");
				return;
			}

			var phoneNumber = $("#btn_phone").val();
			phoneNumber = phoneNumber.substr(0,3) + "&nbsp;" + phoneNumber.substr(3,4) + "&nbsp;" + phoneNumber.substr(7);
			$(".phoneNumber").html(phoneNumber);
			$("#btn_login").removeClass("submitH");
			$("#btn_login").addClass("submit");	
			app.gate.show("validate"); /*切换到手机接收验证码页面*/

			app.validateEvent(); /*加载事件：手机验证码处理*/
			app.getCode(app.baseUrl + "user/send_verify_code",{mobile : $value});

		});
	} , /*end function*/

	validateEvent : function(){
		var $btn_send = $("#btn_send b");
		var tid = setInterval(function(){
			$btn_send.html($btn_send.html()-1);
			if($btn_send.html()=="0")
			{
				clearInterval(tid);
				$("#btn_send").html("重发验证码");
				$("#btn_send").removeClass("button-validate");
				$("#btn_send").addClass("button-validateH");
			}
		},1000);

		$("#btn_validate")[0].onkeypress = function(e){
			if(e.keyCode>=48 && e.keyCode<=57)
			{
				if(e.target.value.length>0)
				{
					$("#sh_delete_v").removeClass("hide");
				}
				return true;
			}
			else
			{
				return false;
			}
		}

		$("#btn_validate")[0].onkeyup = function(e){
			$(".errorTip").addClass("hide");
			if(e.target.value.length==6)
			{
				var $key = $(".icon-key");
				$("#btn_login").removeClass("submit");
				$("#btn_login").addClass("submitH");
				$key.removeClass("icon-key");
				$key.addClass("icon-keyH");
			}
			else if(e.target.value.length==0)
			{
				$("#sh_delete_v").addClass("hide");
			}
			else
			{
				var $key = $(".icon-keyH");
				$("#btn_login").removeClass("submitH");
				$("#btn_login").addClass("submit");
				$key.removeClass("icon-keyH");
				$key.addClass("icon-key");
			}
		}

		$("#sh_delete_v").on("click",function(){
			$("#btn_validate").val("");
			$(this).addClass("hide");

			$phone = $(".icon-keyH");
			$submit = $(".submitH");
			$phone.removeClass("icon-keyH");
			$phone.addClass("icon-key");
			$submit.removeClass("submitH");
			$submit.addClass("submit");
			$(".errorTip").addClass("hide");
		});

		/*Event : 登录*/
		$("#btn_login").on("click",function(){
			var $value = $("#btn_phone").val();
			var $verifyCode = $("#btn_validate").val();
			if($(this)[0].className=="submit")
			{
				return;
			}
			app.phoneLogin(app.baseUrl + "user/reg",{mobile : $value , verify_code : $verifyCode});
		});

		/*Event :  重发验证码*/
		$("#btn_send").on("click",function(){
			if($(this)[0].className=="button-validateH")
			{
				//重发验证法 ajax
				$(this)[0].className="button-validate";
				$("#btn_login")[0].className="submit";
				$("#btn_validate").val("");
				$("#sh_delete_v").addClass("hide");
				$(this).html("<b>120</b>秒后重发");
				$btn_send = $("#btn_send b");

				var tid = setInterval(function(){
					$btn_send.html($btn_send.html()-1);
					if($btn_send.html()=="0")
					{
						clearInterval(tid);
						$("#btn_send").html("重发验证码");
						$("#btn_send").removeClass("button-validate");
						$("#btn_send").addClass("button-validateH");
					}
				},1000);				
			}
		});

	} , /*end function*/

	userpwdEvent : function(){
		$("#btn_user")[0].onkeyup = function(e){
			var target = e.target;
			var $icon_user = $(".icon-user");
			if(target.value.length>0)
			{
				$icon_user.removeClass("icon-user");
				$icon_user.addClass("icon-userH");
				$("#sh_delete_user").removeClass("hide");
			}
			else if(target.value.length==0)
			{
				var $icon_user = $(".icon-userH");
				$icon_user.removeClass("icon-userH");
				$icon_user.addClass("icon-user");
				$("#sh_delete_user").addClass("hide");			
			}
			innerF_validate();
		}

		$("#btn_pwd")[0].onkeyup = function(e){
			var target = e.target;
			var $icon_pwd = $(".icon-pwd");
			if(target.value.length>0)
			{
				$icon_pwd.removeClass("icon-pwd");
				$icon_pwd.addClass("icon-pwdH");
				$("#sh_delete_pwd").removeClass("hide");
			}
			else if(target.value.length==0)
			{
				var $icon_pwd = $(".icon-pwdH");
				$icon_pwd.removeClass("icon-pwdH");
				$icon_pwd.addClass("icon-pwd");
				$("#sh_delete_pwd").addClass("hide");
			}
			innerF_validate();
		}

		$("#sh_delete_user").on("click",function(){
			$("#btn_user").val("");
			$(this).addClass("hide");
			var $icon_userH = $(".icon-userH");
			$icon_userH.removeClass("icon-userH");
			$icon_userH.addClass("icon-user");
		});

		$("#sh_delete_pwd").on("click",function(){
			$("#btn_pwd").val("");
			$(this).addClass("hide");
			var $icon_pwdH = $(".icon-pwdH");
			$icon_pwdH.removeClass("icon-pwdH");
			$icon_pwdH.addClass("icon-pwd");
		});

		var innerF_validate = function(){
			var $btn_user = $("#btn_user");
			var $btn_pwd = $("#btn_pwd");
			var $btn = $("#btn_loginForpwd");
			if($btn_user[0].value.length>0 && $btn_pwd[0].value.length>=6)
			{
				$btn.removeClass("submit");
				$btn.addClass("submitH");
			}
			else
			{
				$btn.removeClass("submitH");
				$btn.addClass("submit");				
			}
		}

	} ,  /*end function userpwdEvent*/
	/*---------------前后端交互接口-------------------*/
	getCode : function(url,json){
		$.post(url,
		json,
		function(data,state){
			if(data.msg=="Success")
			{
			}
			else
			{
			}
		});
	} , 
	phoneLogin : function(url,json){
		$.post(url,
		json,
		function(data,state){
			if(data.msg=="Success")
			{

			}
			else
			{

			}
		});
	}
};

app.init();


</script>


